<!-- polls/templates/polls/results.html -->
{% extends "polls/base.html" %}

{% block title %}投票结果 - {{ question.question_text }}{% endblock %}

{% block content %}
<div class="text-center mb-5">
    <h1 class="display-5 fw-bold text-dark mb-3">{{ question.question_text }}</h1>
    <p class="text-muted">实时投票结果统计</p>
</div>

<!-- 数据统计卡片 -->
<div class="row row-cols-1 row-cols-md-3 g-4 mb-5">
    <div class="col">
        <div class="card text-white bg-primary h-100">
            <div class="card-body">
                <h5 class="card-title">总投票数</h5>
                <p class="display-4 fw-bold">{{ total_votes }}</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card text-white bg-success h-100">
            <div class="card-body">
                <h5 class="card-title">最多票数</h5>
                <p class="display-4 fw-bold">{{ max_votes }}</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card text-white bg-info h-100">
            <div class="card-body">
                <h5 class="card-title">参与人数</h5>
                <p class="display-4 fw-bold">{{ user_count }}</p>
            </div>
        </div>
    </div>
</div>

<!-- 图表容器 -->
<div class="chart-container">
    <canvas id="resultsChart"></canvas>
</div>

<!-- 返回链接 -->
<div class="text-center mt-5">
    <a href="{% url 'polls:detail' question.id %}" class="btn btn-outline-primary">
        <i class="bi bi-arrow-repeat me-2"></i>
        重新投票
    </a>
</div>
{% endblock %}

{% block scripts %}
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('resultsChart').getContext('2d');
const chart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: {{ choices|safe }},
        datasets: [{
            label: '得票数',
            data: {{ votes|safe }},
            backgroundColor: [
                '#3498db', '#2ecc71', '#9b59b6', 
                '#f1c40f', '#e74c3c', '#1abc9c'
            ],
            borderWidth: 3
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'right',
            },
            title: {
                display: true,
                text: '投票结果分布图',
                font: { size: 18 }
            }
        }
    }
});
</script>
{% endblock %}
